<template>
	<div class="layout-padding">
		<splitpanes horizontal>

		<pane size="50">
			<div class="layout-padding-auto layout-padding-view">

				<!--表单查询条件-->
				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
					<el-form-item :label="$t('so.socode')" prop="socode">
						<el-input v-model="state.queryForm.socode" clearable :placeholder="$t('so.entryso')" />
					</el-form-item>

					<el-form-item :label="$t('so.sodate')" prop="sodate">
						<div class="block">
							<el-date-picker
								v-model="sodate"
								:clearable="true"
								type="daterange"
								unlink-panels
								range-separator="To"
								start-placeholder="Start date"
								end-placeholder="End date"
								:shortcuts="shortcuts"
							/>
						</div>
					</el-form-item>

					<el-form-item :label="$t('so.isactive')" prop="isactive">
						<el-select v-model="state.queryForm.isactive" placeholder="Select" style="width: 160px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button icon="search" type="primary"  @click="query">  {{ $t('so.query') }}</el-button>
						<el-button  icon="refresh"  @click="resetQuery">{{$t('so.reset')}}</el-button>
						<el-button icon="DocumentAdd" type="primary" @click="onOpenMarkMenu">{{$t('so.shippingMark')}}</el-button>

					</el-form-item>
				</el-form>

				<el-table
					:data="state.dataList"
					highlight-current-row
					v-loading="state.loading"
					border
					style="width: 100%; height: 100%"
					:cell-style="tableStyle.cellStyle"
					stripe
					:header-cell-style="tableStyle.headerCellStyle"
					@row-click="clickRow"
					ref="tableRef"
				>
					<!-- 展开行 -->
					<!-- <el-table-column type="expand">
						<template #default="props">
							<div m="4" style="max-height: 400px; overflow-y: auto; padding: 4px">
								<div class="flex gap-2">
									<el-tag type="success">{{$t('so.sodetail')}}</el-tag>
								</div>

								<el-table :data="props.row.mesSalesorderDs"  :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle" border>
									<el-table-column :label="$t('so.materialcode')" prop="materialCode" width="150px" show-overflow-tooltip />
									<el-table-column :label="$t('so.materialname')" prop="materialName" width="150px" />
									<el-table-column :label="$t('so.materialspec')" prop="materialSpec" width="300px" />
									<el-table-column :label="$t('so.saleqty')" prop="salesQty" width="150px" />
									<el-table-column :label="$t('so.baseqty')" prop="baseQty" width="150px" />
									<el-table-column :label="$t('so.unit')" prop="unit" width="150px" />
									<el-table-column :label="$t('so.baseunit')" prop="baseUnit" width="150px" />
									<el-table-column :label="$t('so.pcsperbox')" prop="pcsPerBox" width="150px" />
									<el-table-column :label="$t('so.boxperpallet')" prop="boxPerPallet" width="150px" />
									<el-table-column :label="$t('so.starttray')" prop="startTrayNumber" width="150px" />
									<el-table-column :label="$t('so.endtray')" prop="endTrayNumber" width="150px" />
									<el-table-column :label="$t('so.trayqty')" prop="trayQty" width="150px" />
									<el-table-column :label="$t('so.traytype')" prop="trayType" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.series')" prop="productSeries" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.deliveryqty')" prop="deliveryQty" width="150px" show-overflow-tooltip />
									<el-table-column :label="$t('so.deliverydate')" prop="deliveryDate" width="200px" show-overflow-tooltip />
									<el-table-column :label="$t('so.masktype')" prop="maskType" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.oiltype')" prop="oilFilmType" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.cartonnumber')" prop="cartonNumber" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.cartonname')" prop="cartonName" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.cartonspec')" prop="cartonSpec" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.instrnum')" prop="instrutionNumber" width="300px" show-overflow-tooltip />
									<el-table-column :label="$t('so.instrdesc')" prop="instrutionDesc" width="300px" show-overflow-tooltip />
								</el-table>
							</div>
						</template>
					</el-table-column>-->

					<el-table-column type="selection" width="40" align="center" />
					<el-table-column type="index" label="#" width="80" />
					<el-table-column prop="soCode" :label="$t('so.socode')" show-overflow-tooltip />
					<el-table-column prop="soDate" :label="$t('so.sodate')" show-overflow-tooltip />
					<el-table-column prop="isActive" :label="$t('so.isactive')" show-overflow-tooltip >
						<template #default="scope">
                            <!--根据不同的状态选择不同的颜色的tag-->
                            <el-tag size="large" :type="scope.row.isActive === 'Y' ? 'success' : 'danger'">
                                {{ scope.row.isActive }}
                            </el-tag>
                        </template>
					</el-table-column>
					<el-table-column prop="countryName" :label="$t('so.country')" show-overflow-tooltip />
					<el-table-column prop="checkUserName" :label="$t('so.checkuser')" show-overflow-tooltip />
					<el-table-column prop="checkDate" :label="$t('so.checkdate')" show-overflow-tooltip />
					<el-table-column prop="currency" :label="$t('so.currency')" show-overflow-tooltip />
					<el-table-column prop="exchangeRate" :label="$t('so.rate')" show-overflow-tooltip />
					<el-table-column prop="cabinetNumber" :label="$t('so.cabient')" show-overflow-tooltip />
					<el-table-column prop="sampleTag" :label="$t('so.sample')" show-overflow-tooltip />
				</el-table>

				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
			</div>
		</pane>

		<!--销售订单明细数据-->
		<pane size='50'>
			<div class="layout-padding-auto layout-padding-view">
				<el-tabs model-value="first">
					<el-tab-pane name="first">
						<template #label>
							<span class="ml-0.5">
								{{ $t('so.soDetail') }}
							</span>
						</template>
					</el-tab-pane>
				</el-tabs>

				<so-detail ref="locationRef" @refresh="getDataList(false)"/>
			</div>
		</pane>

		</splitpanes>
		<MenuDialog  ref="MarkDialogRef"/>
	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { querySalesorder } from '/@/api/platform/report/salesorder';
import { ref,reactive } from 'vue';
import { ElMessage } from 'element-plus';
import {useI18n} from 'vue-i18n';
import soDetail from "./soDetail.vue";
const MenuDialog = defineAsyncComponent(() => import('./shippingMark.vue'));

const {t} = useI18n();
// 引入组件
//const MarkDialog = defineAsyncComponent(() => import('./shippingMark.vue'));

const getYMD = (date:any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};

const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
const sodate = ref([endDate, today]);

const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];

const options = ref([
	{ label: 'All', value: 'S' },
	{ label: 'Yes', value: 'Y' },
	{ label: 'No', value: 'N' },
]);

// 搜索变量
const queryRef = ref();
const locationRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		isactive: 'S',
		StartSoDate:sodate.value ? getYMD(sodate.value[0]) : '',
		EndSoDate:sodate.value ? getYMD(sodate.value[1]) : '',
	},
	pageList: querySalesorder,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空日期选择器的值
	//重置清空日期选择器
	sodate.value=''
	state.queryForm.StartSoDate=''
	state.queryForm.EndSoDate=''
	state.queryForm.sodate = null;
	//重置选择
	state.queryForm.isactive = 'S';
	// 清空搜索条件
	queryRef.value?.resetFields();

	locationRef.value?.refresh("")

	getDataList(false);
};



const query = () => {

	// if (!sodate.value || !sodate.value[0]) {
	// 	ElMessage.error(t("so.mustdate")); // 使用Element Plus的message组件提示用户
	// 	return; // 如果开始时间未选，则不继续执行后续逻辑
	// }

	state.queryForm.StartSoDate = sodate.value ? getYMD(sodate.value[0]) : '';
	state.queryForm.EndSoDate = sodate.value ? getYMD(sodate.value[1]) : '';
	getDataList();
};

// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row);
}


const MarkDialogRef = ref();
const tableRef = ref();
// 打开唛头菜单弹窗
const onOpenMarkMenu = () => {
	const selectedAry = tableRef.value.getSelectionRows();
	if(selectedAry.length!=1){
		ElMessage.error(t('so.checkOrder'));
		return;
	}
	MarkDialogRef.value.openDialog(selectedAry[0].id);
};
</script>
